<template>
  <div class="layout">
    <!-- 左侧竖式导航栏 -->
    <div class="side-navbar">
      <nav class="navbar">
        <a
          class="navbar-brand text-center"
          href="#"
        >课程练习</a>
        <div class="nav-buttons">
          <!-- 学生可见的按钮 -->
          <template v-if="userRole === 'student'">
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('unfinishedExercise')"
            >
              未做练习
              <!-- 破裂碎片 -->
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
            <!-- 其他按钮同理添加碎片 -->
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('finishedExercise')"
            >
              已做练习
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('collectingExercise')"
            >
              收藏题库
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('wrongExercise')"
            >
              错题库
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
          </template>
          
          <!-- 教师可见的按钮 -->
          <template v-if="userRole === 'teacher'">
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('addExercise')"
            >
              添加练习
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('deleteExercise')"
            >
              删除练习
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('exerciseBank')"
            >
              练习题库
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
            <button 
              type="button" 
              class="btn my-exercise-btn" 
              @click="handleButtonClick('gradeExercise')"
            >
              批改练习
              <span class="shard shard-1" />
              <span class="shard shard-2" />
              <span class="shard shard-3" />
              <span class="shard shard-4" />
              <span class="shard shard-5" />
              <span class="shard shard-6" />
              <span class="shard shard-7" />
              <span class="shard shard-8" />
            </button>
          </template>
        </div>
      </nav>
    </div>

    <!-- 动态内容区域 -->
    <transition name="page">
      <div class="content-container">
        <component 
          :is="currentView" 
          :key="currentView"
          class="page" 
        />
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    userRole: { type: String, required: true },
    userId: { type: String, required: true },
    courseId: { type: String, required: false }
  },
  emits: ['action'],
  data() {
    return {
      currentView: ''
    };
  },
  methods: {
    // 点击处理函数（触发动画+原有逻辑）
    handleButtonClick(type, event = window.event) { // 兼容无$event传递的情况
      // 安全获取event对象
      const e = event || window.event;
      if (!e) return; // 防止无event对象的极端情况

      // 触发破裂动画
      const button = e.target.closest('.my-exercise-btn');
      if (button) { // 防止button不存在的情况
        button.classList.add('breaking');
        setTimeout(() => {
          button.classList.remove('breaking');
        }, 400);
      }

      // 原有逻辑
      this.$emit('action', { type, userId: this.userId, courseId: this.courseId });
      this.currentView = this.getViewNameByType(type);
    },
    getViewNameByType(type) {
      return {
        'unfinishedExercise': 'UnfinishedExercise',
        'finishedExercise': 'FinishedExercise',
        'collectingExercise': 'CollectingExercise',
        'wrongExercise': 'WrongExercise',
        'addExercise': 'AddExercise',
        'deleteExercise': 'DeleteExercise',
        'exerciseBank': 'ExerciseBank',
        'gradeExercise': 'GradeExercise'
      }[type];
    }
  }
};
</script>

<style scoped>
/* 整体布局（保持不变） */
.layout { display: flex; min-height: 100vh; background-color: #f5f7fa; position: relative; overflow: hidden; }

/* 左侧导航栏样式（保持不变） */
.side-navbar { flex: 0 0 250px; background-color: #3a4378; padding: 2rem 1rem; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1); height: 100vh; z-index: 100; }

/* 内容容器样式（保持不变） */
.content-container { flex-grow: 1; position: relative; height: 100vh; overflow: hidden; }

/* 页面过渡样式（保持不变） */
.page { position: absolute; width: 100%; height: 100vh; transition: all 0.3s ease-in-out; z-index: 10; }
.page-enter-active, .page-leave-active { position: absolute; width: 100%; height: 100vh; }
.page-enter-from { transform: translateX(100%); opacity: 0; }
.page-enter-to { transform: translateX(0); opacity: 1; }
.page-leave-from { transform: translateX(0); opacity: 1; }
.page-leave-to { transform: translateX(-100%); opacity: 0; }

/* 按钮基础样式（保持不变） */
.navbar { display: flex; flex-direction: column; align-items: stretch; height: 100%; color: #e0e3f0; }
.navbar-brand { margin-bottom: 2rem; text-align: center; font-size: 1.75rem; font-weight: 700; color: #f8f9fd; border-bottom: 2px solid #4a5386; padding-bottom: 0.5rem; }
.nav-buttons { flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; }
.my-exercise-btn { position: relative; padding: 1rem 1.5rem; border: none; border-radius: 0.75rem; font-size: 1.125rem; font-weight: 500; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; background-color: #404980; color: #e0e3f0; overflow: hidden; z-index: 1; }
.my-exercise-btn::before, .my-exercise-btn::after { content: ""; position: absolute; background-color: #6b76b0; transition: all 0.6s ease; z-index: -1; }
.my-exercise-btn::before { width: 10px; height: 10px; top: -5px; left: -5px; transform: rotate(45deg); opacity: 0; }
.my-exercise-btn::after { width: 10px; height: 10px; bottom: -5px; right: -5px; transform: rotate(-45deg); opacity: 0; }
.my-exercise-btn:hover::before, .my-exercise-btn:hover::after { opacity: 1; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(0deg); top: 0; left: 0; }
.my-exercise-btn:hover { color: #ffffff; box-shadow: 2px 2px 8px rgba(107, 118, 176, 0.2); transform: translateX(4px); transition-delay: 0.2s; }

/* 新增破裂动画样式（优化版） */
.my-exercise-btn .shard {
  position: absolute;
  width: 6-10px; /* 随机宽度 */
  height: 6-10px; /* 随机高度 */
  background: #6b76b0; /* 与按钮hover颜色一致 */
  border-radius: 1-3px; /* 随机圆角 */
  pointer-events: none; 
  opacity: 0;
  transform: translate(0, 0);
  /* 随机初始旋转角度 */
  transform-origin: center;
}

/* 为每个碎片定义独立的动画参数 */
.my-exercise-btn.breaking .shard-1 { animation: break-1 0.5s ease-out; }
.my-exercise-btn.breaking .shard-2 { animation: break-2 0.5s ease-out 0.08s; }
.my-exercise-btn.breaking .shard-3 { animation: break-3 0.5s ease-out 0.12s; }
.my-exercise-btn.breaking .shard-4 { animation: break-4 0.5s ease-out 0.16s; }
.my-exercise-btn.breaking .shard-5 { animation: break-5 0.5s ease-out 0.04s; }
.my-exercise-btn.breaking .shard-6 { animation: break-6 0.5s ease-out 0.1s; }
.my-exercise-btn.breaking .shard-7 { animation: break-7 0.5s ease-out 0.14s; }
.my-exercise-btn.breaking .shard-8 { animation: break-8 0.5s ease-out 0.18s; }

/* 8组不同方向的动画轨迹（覆盖上下左右+斜向） */
@keyframes break-1 {
  0% { opacity: 1; transform: translate(0, 0) rotate(15deg) scale(1); }
  100% { opacity: 0; transform: translate(-40px, -45px) rotate(30deg) scale(0.2); }
}
@keyframes break-2 {
  0% { opacity: 1; transform: translate(0, 0) rotate(-20deg) scale(1); }
  100% { opacity: 0; transform: translate(35px, -30px) rotate(-10deg) scale(0.25); }
}
@keyframes break-3 {
  0% { opacity: 1; transform: translate(0, 0) rotate(45deg) scale(1); }
  100% { opacity: 0; transform: translate(-25px, 40px) rotate(60deg) scale(0.3); }
}
@keyframes break-4 {
  0% { opacity: 1; transform: translate(0, 0) rotate(-30deg) scale(1); }
  100% { opacity: 0; transform: translate(50px, 25px) rotate(-45deg) scale(0.22); }
}
@keyframes break-5 {
  0% { opacity: 1; transform: translate(0, 0) rotate(10deg) scale(1); }
  100% { opacity: 0; transform: translate(-15px, -50px) rotate(20deg) scale(0.28); }
}
@keyframes break-6 {
  0% { opacity: 1; transform: translate(0, 0) rotate(-15deg) scale(1); }
  100% { opacity: 0; transform: translate(20px, -40px) rotate(-5deg) scale(0.24); }
}
@keyframes break-7 {
  0% { opacity: 1; transform: translate(0, 0) rotate(30deg) scale(1); }
  100% { opacity: 0; transform: translate(-35px, 30px) rotate(45deg) scale(0.26); }
}
@keyframes break-8 {
  0% { opacity: 1; transform: translate(0, 0) rotate(-25deg) scale(1); }
  100% { opacity: 0; transform: translate(45px, 35px) rotate(-30deg) scale(0.2); }
}
/* 优化碎片尺寸随机（使用CSS变量+calc） */
.my-exercise-btn .shard-1 { width: 8px; height: 6px; border-radius: 1px; }
.my-exercise-btn .shard-2 { width: 7px; height: 9px; border-radius: 2px; }
.my-exercise-btn .shard-3 { width: 10px; height: 5px; border-radius: 3px; }
.my-exercise-btn .shard-4 { width: 6px; height: 8px; border-radius: 1px; }
.my-exercise-btn .shard-5 { width: 9px; height: 7px; border-radius: 2px; }
.my-exercise-btn .shard-6 { width: 5px; height: 10px; border-radius: 3px; }
.my-exercise-btn .shard-7 { width: 8px; height: 8px; border-radius: 1px; }
.my-exercise-btn .shard-8 { width: 7px; height: 6px; border-radius: 2px; }

/* 移动端适配（保持不变） */
@media (max-width: 768px) { 
  .side-navbar { flex: 0 0 auto; width: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: auto; } 
  .nav-buttons { flex-direction: row; justify-content: center; gap: 1.5rem; padding: 1.5rem 0; } 
  .my-exercise-btn { padding: 0.75rem 1rem; font-size: 1rem; } 
}
</style>
